<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="saveWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="saveForm">

                    <div class="form-group">
                        <label for="create-owner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control ownerSelect" id="create-owner"></select>
                        </div>
                        <label for="create-name" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-8" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="create-startTime" placeholder="开始日期" readonly>
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="create-endTime" placeholder="结束日期" readonly>
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="editForm">
                    <input type="hidden" id="id">
                    <div class="form-group">
                        <label for="edit-owner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control ownerSelect" id="edit-owner">
                            </select>
                        </div>
                        <label for="edit-name" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-8" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="edit-startTime">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="edit-endTime">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="edit()">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS/XLSX的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>

<!--======================顶部导航栏==============================-->
<ol class="breadcrumb">
    <li><a href="workbench/index" target="_parent">工作台</a></li>
    <li class="active">市场活动</li>
</ol>

<!--查询板块-->
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" id="searchForm" style="position: relative;top: 8%; left: 5px;">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control name" type="text" id="name">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <select class="form-control ownerSelect" id="userName"></select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">活动时间范围</div>
                        <input type="text" class="form-control myDateTime" id="startDate" placeholder="起始时间" readonly>
                    </div>
                </div>
                ~
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control myDateTime" id="endDate" placeholder="结束时间" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default" onclick="$('#tab').bootstrapTable('refresh');"><span
                            class="glyphicon glyphicon-search"></span> 查询
                    </button>
                    &nbsp;
                    <button type="button" class="btn btn-default"
                            onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');"><span
                            class="glyphicon glyphicon-refresh"></span> 清空
                    </button>
                </div>
            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#saveWindow">
                    <span class="glyphicon glyphicon-plus"></span> 新增
                </button>

                <button type="button" class="btn btn-danger" onclick="removeBatch()"><span class="glyphicon glyphicon-minus"></span> 批量删除</button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table id="tab"></table>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js "></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        initTable();
        initSelect();
        // 日期框初始化
        $('.myDateTime').datetimepicker({
            language: 'zh-CN',
            // 日期格式化
            format: 'yyyy-mm-dd',
            // 一周的起始
            weekStart: 1,
            // 选择日期后自动关闭
            autoclose: true,
            // 默认显示月历
            minView: 'month',
            // 是否显示今天按钮
            todayBtn: true,
            forceParse: false
        });


    });

    $('#saveWindow').on('hidden.bs.modal', function () {
        $('#saveForm')[0].reset();
    });
    $('#editWindow').on('hidden.bs.modal', function () {
        $('#editForm')[0].reset();
    });
    // 表格初始化
    function initTable() {
        //调用配置异步表格的方法
        $('#tab').bootstrapTable({
            //=========== 表格配置项===============
            // http 请求方式
            method: 'get',
            // 请求路径
            url: 'activity/page',
            // 点击选中
            clickToSelect: true,
            // 单选
            //singleSelect: true,
            // 开启分页
            pagination: true,
            // 设置分页的位置 server 服务器端分页  local 前端分页
            sidePagination: 'server',
            // 设置每页条数
            pageSize: 5,
            // 设置每页条数列表
            pageList: [5, 10, 20, 50],
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            // 查询时的参数
            queryParamsType: '',
            queryParams: function (params) {
                // 获取自定义的请求参数
                params.name = $('.name').val();
                params.owner = $('#userName').val();
                params.startDate = $('#startDate').val();
                params.endDate = $('#endDate').val();
                return params;
            },
            // 处理响应的格式
            responseHandler: function (res) {
                if (res.code == 0) {
                    return {
                        rows: res.data.list,
                        total: res.data.total
                    }
                }
            },
            // 表各种的列元素描述
            columns: [
                {
                    //复选框
                    checkbox: true
                }, {
                    field: 'id',
                    visible:false
                },{
                    //列名
                    title: '名称',
                    field: 'name',
                    halign: 'center',
                    // 列数据初始化
                    formatter: function (value, row) {
                        // 格式化之后的列数据
                        return '<a href="activity/detail/'+ row.id +'">'+ value +' </a>';
                    }
                }, {
                    //列名
                    title: '所有者',
                    field: 'userName',
                    halign: 'center'
                },{
                    //列名
                    title: '开始日期',
                    field: 'startDate',
                    halign: 'center'
                },{
                    //列名
                    title: '结束日期',
                    field: 'endDate',
                    halign: 'center'
                }, {
                    //列名
                    title: '创建者',
                    field: 'createBy',
                    halign: 'center'
                },{
                    //列名
                    title: '创建时间',
                    field: 'createTime',
                    halign: 'center'
                },{
                    //列名
                    title: '修改者',
                    field: 'editBy',
                    halign: 'center'
                },{
                    //列名
                    title: '修改时间',
                    field: 'editTime',
                    halign: 'center'
                }, {
                    title: '操作',
                    halign: 'center',
                    formatter: function (value, row) {
                        return '<button type="button" class="btn btn-warning btn-sm"  onclick="openEdit(\'' + row.id + '\')"><span class="glyphicon glyphicon-edit"></span> 编辑</button>' +
                            '&emsp;' + '&emsp;' + '<button type="button" class="btn btn-danger btn-sm" onclick="remove(\'' + row.id + '\')"><span class="glyphicon glyphicon-remove"></span> 删除</button>';
                    }
                }
            ]
        });
    }

    // 加载关联信息 初始化下拉列表
    function initSelect() {
        $.ajax('user/list',{
            type:'get',
            success: function (res) {
                if(res.code == 0){
                    var str = '<option value=""></option>';
                    $.each(res.data, function () {
                        str += '<option value="'+ this.id +'">'+ this.name +'</option>';
                    });
                    $('.ownerSelect').html(str)
                }
            }
        })
    }

    // 新增
    function save() {
        $.ajax('activity/save', {
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
                owner: $('#create-owner').val(),
                name: $('#create-name').val(),
                startDate: $('#create-startTime').val(),
                endDate: $('#create-endTime').val(),
                cost: $('#create-cost').val(),
                description: $('#create-description').val()
            }),
            beforeSend: function () {
                var name = $('#create-name').val();
                if (!name) {
                    alert("未填写活动名称");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("新增成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#saveWindow').modal('hide');

                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 打开修改
    function openEdit(id) {
        $.ajax('activity/find/' + id, {
            type: 'get',
            success: function (res) {
                if (res.code == 0) {
                    $('#id').val(res.data.id);
                    $('#edit-owner').val(res.data.owner);
                    $('#edit-name').val(res.data.name);
                    $('#edit-startTime').val(res.data.startDate);
                    $('#edit-endTime').val(res.data.endDate);
                    $('#edit-description').val(res.data.description);
                    $('#edit-cost').val(res.data.cost);
                    // 打开窗体
                    $('#editWindow').modal('show');
                }
            }
        })
    }

    // 修改
    function edit() {
        $.ajax('activity/edit', {
            type: 'put',
            contentType: 'application/json',
            data: JSON.stringify({
                id: $('#id').val(),
                owner: $('#edit-owner').val(),
                startDate: $('#edit-startTime').val(),
                endDate: $('#edit-endTime').val(),
                cost: $('#edit-cost').val(),
                name: $('#edit-name').val(),
                description: $('#edit-description').val()
            }),
            beforeSend: function () {
                var name = $('#edit-name').val();
                if (!name) {
                    alert("未填写名称");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("修改成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#editWindow').modal('hide');

                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 删除
    function remove(id) {
        if (confirm("确定要删除该条数据吗?")) {
            $.ajax('activity/delete/' + id, {
                type: 'delete',
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }

    // 批量删除
    function removeBatch() {
        //获取用户的选择
        var rows = $('#tab').bootstrapTable('getSelections');
        if (rows.length == 0) {
            alert("请选择要删除的数据");
        } else {
            if (!confirm("确定要删除数据吗?")) {
                return;
            }
            var ids = [];
            $.each(rows, function () {
                ids.push(this.id);
            })
            $.ajax('activity/delete', {
                type: 'post',
                data: {
                    _method: 'delete',
                    ids: ids.join()
                },
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }
</script>
</body>
</html>